<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>layout页面布局</title>
    <script src="../js/jquery-1.8.3.js"></script>
    <script src="../js/easyui/jquery.easyui.min.js"></script>
    <script src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" href="../js/easyui//themes/default/easyui.css">
    <link rel="stylesheet" href="../js/easyui/themes/icon.css">
</head>
<body class="easyui-layout">
    <div data-options="region:'north', title:'传智播客管理系统'" style="height:100px;" >北部区域</div>
    <div data-options="region:'west', title:'菜单导航'" style="width:180px;">
        <div class="easyui-accordion" data-options="fit:true">
            <div data-options="title:'基础菜单'">
                <a href="javascript:;" id="czbkLink">传智播客</a>
            </div>
            <div data-options="title:'系统菜单'">面板二</div>
        </div>
    </div>
    <div data-options="region:'center'">
        <div id="mytabs" class="easyui-tabs" data-options="fit:true">
            <div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
            <div data-options="title:'选项卡面板二'">选项卡面板二</div>
        </div>
    </div>
    <div data-options="region:'east'" style="width:80px;">东部区域</div>
    <div data-options="region:'south'" style="height:80px;">南部区域</div>
</body>
<script>
    $("#czbkLink").on("click", function(){
        $("#mytabs").tabs("add",{
            title: '传智播客',
            content: '传智播客专注IT培训教育',
        });
    });
</script>
</html>